<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            position: fixed;
            list-style: none;
            right: 0;
            top: 200px;

        }

        li {
            width: 100px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border: 1px solid red;
        }

        div {
            height: 600px;
            border-top: 1px solid blue;

        }

        a {
            text-decoration: none;
        }

        /*
        锚点作用：页面不同区域的跳转，使用a链接
        <a href="#锚点名字"></a>
        <div id="锚点名字"></div>
        */
    </style>
</head>

<body>
    <ul>
        <li><a href="#a">金丹期</a></li>
        <li><a href="#b">元婴期</a></li>
        <li><a href="#c">洞虚期</a></li>
        <li><a href="#d">空冥期</a></li>
        <li><a href="#e">渡劫期</a></li>
        <li><a href="#f">大成期</a></li>
    </ul>
    <div id="a"><img
            src="https://contentcms-bj.cdn.bcebos.com/cmspic/064509d6d1a92437a5a7f9c510f99c24.jpeg?x-bce-process=image/crop,x_53,y_0,w_486,h_326"
            alt=""></div>
    <div id="b"><img src="../img/JK.png" alt=""></div>
    <div id="c"><img
            src="https://contentcms-bj.cdn.bcebos.com/cmspic/393647b746538bdcaf314e3e624fbcaa.jpeg?x-bce-process=image/crop,x_0,y_167,w_640,h_430"
            alt=""></div>
    <div id="d"><img
            src="http://contentcms-bj.cdn.bcebos.com/cmspic/ae3e381f7f078dd459b2c4f395c28b4b.jpeg?x-bce-process=image/crop,x_0,y_0,w_640,h_430"
            alt=""></div>
    <div id="e"><img
            src="https://contentcms-bj.cdn.bcebos.com/cmspic/44960a7e5d19a8ef2ef6df16d4c09d73.jpeg?x-bce-process=image/crop,x_55,y_0,w_903,h_606"
            alt=""></div>
    <div id="f"><img
            src="https://t10.baidu.com/it/u=2856642429,164606709&fm=30&app=106&f=JPEG?w=312&h=208&s=D78409AAC24108E67499B3A80300D015"
            alt=""></div>
</body>

</html>